<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <script src="../../assets/google-code-prettify/prettify.js"></script>
  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>




  <script src="../assets/js/example.js"></script>
</head>

<body onload="prettyPrint()">
  <article>
    <section id="buttons" class="page-section">
    <h1 class="header-dividing">代码</h1>
    <h2>类型</h2>
    <h3>内联代码</h3>
    <div contenteditable="true" spellcheck="false" class="segment">
      <p>通过<code>&lt;code&gt;</code>标签内嵌一小段代码。</p>
    </div>
    <h3>基本代码块</h3>
    <div contenteditable="true" spellcheck="false" class="segment">
      <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
    </div>
    <p>还可以使用<code>.pre-scrollable</code> class，其作用是设置max-height为350px，并在垂直方向展示滚动条。</p>
    </section>

    <h3>代码高亮</h3>
    <p>代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易，在产品中如需要向用户展现代码应该使用代码高亮。</p>
    <p>这里推荐的方案是<a href="https://code.google.com/p/google-code-prettify/" target="_blank">Google Code Prettify</a>实现代码高亮。</p>
    <p>下面是一个php文件的示例：</p>
    <div contenteditable="true" spellcheck="false" class="segment">
      <pre class="prettyprint linenums"><code>&lt;!doctype html&gt;&#10;&lt;html lang="en"&gt;&#10;  &lt;head&gt;&#10;    &lt;title&gt;Zentao Design Guidelines&lt;/title&gt;&#10;  &lt;/head&gt;&#10;  &lt;body&gt;&#10;  &lt;?php&#10;    echo "hello, world!";&#10;  ?&gt;&#10;  &lt;/body&gt;&#10;&lt;/html&gt;</code></pre>

    </div>
  </article>

</body>
</html>
